import * as React from 'react'
import { Button, Card, Icon } from 'antd/es';
import { connect } from 'react-redux';
import { getAssignment, getReviewQuiz, submitAnswer } from '../../../actions/assignment';
import TwsReactMarkdownPreview from '../../common/markdown/MarkdownPreview'
import TwsReactMarkdownEditor from '../../common/markdown/MarkdownEditor'
import ReviewQuizBox from '../../common/ReviewQuizBox';
const submitTimeBoxStyle = {
    marginLeft: '10px', fontSize: '12px', color: '#BF9FBC'
}
class SubjectiveQuizBody extends React.Component<any> {
    state = {
        userAnswer: ''
    }

    componentDidMount = () => {
        const { id, quizId } = this.props
        this.load(id, quizId)
    }

    componentWillReceiveProps = (nextProps: any) => {
        const { id, quizId } = nextProps
        if (id === this.props.id) {
            return false
        }
        this.load(id, quizId)
        return true
    }

    load = (assignmentId: number, quizId: number) => {
        this.props.getAssignment(assignmentId)
        this.props.getReviewQuiz(assignmentId, quizId)
    }

    submitAnswer = () => {
        const { taskId, id, quizId } = this.props
        const { userAnswer } = this.state
        this.props.submitAnswer(userAnswer, taskId, id, quizId, 'SUBJECTIVE_QUIZ')
    }

    render() {
        let { assignment, reviewQuiz } = this.props
        const quiz = assignment[0] || {}
        return <Card title={quiz.assignmentTitle}
            noHovering
            bordered={false}
            extra={<ReviewQuizBox reviewQuiz={reviewQuiz} />}
            key={quiz.id}>
            <div>
                <h4>作业内容</h4>
                <div className='markdown-wrap'>
                    <TwsReactMarkdownPreview source={quiz.description} />
                </div>
                {
                    reviewQuiz.id
                        ? <div>
                            <h4>作业答案</h4>
                            <span style={submitTimeBoxStyle}>
                                <Icon type='clock-circle' />
                                {reviewQuiz.createTime}
                            </span>
                            <div className='markdown-wrap'>
                                <TwsReactMarkdownPreview source={quiz.userAnswer} />
                            </div>
                        </div>
                        : <div className='margin-t-2'>
                            <h4>提交答案</h4>
                            <TwsReactMarkdownEditor
                                value=''
                                onChange={(userAnswer: string) => this.setState({ userAnswer })} />
                            <Button className='margin-t-2' onClick={this.submitAnswer}
                                type='primary'>提交</Button>
                        </div>
                }

            </div>
        </Card>
    }
}


const mapStateToProps = ({ user, task, assignment, reviewQuiz }:
    { user: any, task: any, assignment: Array<any>, reviewQuiz: any }) => ({
        user,
        task,
        reviewQuiz,
        assignment
    })
const mapDispatchToProps = (dispatch: Function) => ({
    getAssignment: (assignmentId: number) => dispatch(getAssignment(assignmentId)),
    submitAnswer: (userAnswer: string, taskId: number, assignmentId: number, quizId: number, type: string) => dispatch(submitAnswer(userAnswer, taskId, assignmentId, quizId, type)),
    getReviewQuiz: (assignmentId: number, quizId: number) => dispatch(getReviewQuiz(assignmentId, quizId))

})

export default connect(mapStateToProps, mapDispatchToProps)((SubjectiveQuizBody))
